//图片
Vue.component('Pic', {
    template: `<div :id="id" :class="[layer?'layer':'']" style="display: inline;" :style="{'border':layerBorder}">
    <el-image :style="{width,height,marginLeft:Left,marginRight:Right,marginTop:Top,marginBottom:Bottom,borderRadius:Radius}" 
        src="./img/t1.png" :fit="data.fit"></el-image>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global]
})
Vue.component('PicConfig', {
    template: `<el-card style="background-color: white;">
    <div class="table_titel">
        <div class="titel">图片元素</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="组件宽度">
            <el-input-number v-model="data.width" :min="1" label="请输入组件宽度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="宽度单位">
            <el-select filterable v-model="data.widthUnit" placeholder="请选择宽度单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="组件高度">
            <el-input-number v-model="data.height" :min="1" label="请输入组件高度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="高度单位">
            <el-select filterable v-model="data.heightUnit" placeholder="请选择高度单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="左边距">
            <el-input-number v-model="data.left" :min="0" label="请输入左边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="左边距单位">
            <el-select filterable v-model="data.leftUnit" placeholder="请选择左边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="右边距">
            <el-input-number v-model="data.right" :min="0" label="请输入右边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="右边距单位">
            <el-select filterable v-model="data.rightUnit" placeholder="请选择右边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="上边距">
            <el-input-number v-model="data.top" :min="0" label="请输入上边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="上边距单位">
            <el-select filterable v-model="data.topUnit" placeholder="请选择上边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="下边距">
            <el-input-number v-model="data.bottom" :min="0" label="请输入下边距"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="下边距单位">
            <el-select filterable v-model="data.bottomUnit" placeholder="请选择下边距单位">
                <el-option v-for="(item,index) in unit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="圆角弧度">
            <el-input-number v-model="data.radius" :min="0" label="请输入圆角弧度"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="图片布局">
            <el-select filterable v-model="data.fit" placeholder="请选择图片布局">
                <el-option v-for="(item,index) in fit" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
    </el-descriptions>
</el-card>`,
    mixins: [globalConfig],
})